<template>
  <div class="notice-management-container">
    <!-- 头部标签页 -->
    <div class="notice-tabs">
      <router-link to="/noticeManagement/manageNotice/draft" class="tab-item" :class="{ 'active': $route.path.includes('/draft') }">
        公告草稿箱
      </router-link>
      <router-link to="/noticeManagement/manageNotice/published" class="tab-item" :class="{ 'active': $route.path.includes('/published') }">
        已发布
      </router-link>
    </div>

    <!-- 内容区域 -->
    <div class="notice-content">
      <router-view></router-view>
    </div>
  </div>
</template>
    
    <script>
export default {
  name: "ManageNotice",
};
</script>
    
    <style scoped>
/* 容器样式 */
.notice-management-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 标签页样式 - 严格按需求实现 */
.notice-tabs {
  width: 100vw; /* 100%视窗宽度 */
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  background-color: #fff;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.tab-item {
  flex: 1; /* 各占一半 */
  text-align: center; /* 文字居中 */
  padding: 16px 0;
  font-size: 16px;
  color: #606266;
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
}

.tab-item:hover {
  color: #409eff;
  background-color: #f5f7fa;
}

.tab-item.active {
  color: #409eff;
  font-weight: 500;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #409eff;
}

/* 内容区域样式 */
.notice-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}
</style>